<template>
    <div id="myaxios">
        <h2>这是axios组件</h2>
        <button @click="getData">获取数据</button>
        <button @click="postData">发送数据</button>
        {{list}}
    </div>
</template>

<script>
    //引入axios
    import axios from "axios";
    //console.log(axios.prototype);
    export default {
        name:"AxiosBase",
        data(){
            return{
                list:[]
            }
        },
        methods:{
            getData(){
                //axios默认为get请求
                // axios.get('http://localhost:4000/data')
                //     .then((response) => {
                //         console.log(response);
                //     })
                //     .catch(function(error) {
                //         console.log(error);
                //     });

                //指定get请求参数
                // axios('http://jsonplaceholder.typicode.com/todos?userId=2')
                //         .then((response) => {
                //             console.log(response);
                //         })
                //         .catch(function(error) {
                //             console.log(error);
                //         });
                axios('http://jsonplaceholder.typicode.com/todos',{
                    params:{//与请求一起发送的url参数
                        userId:2
                    }
                })
                .then((response) => {
                    this.list = response.data;
                    console.log(response);
                })
                .catch(function(error) {
                    console.log(error);
                });
            },
            postData(){
			var stu = new URLSearchParams();
				// 设置值
				stu.append('name','123'),
				stu.append('sex','男'),
				axios.post('http://localhost:4000/user',stu)
                    .then(function (response) {
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
			}
            
        }
    }
</script>

<style>

</style>